<template>
    <!-- 容器 -->
    <el-container class="container">
        <!-- 头部 -->
        <el-header class="header">
            <lemon-header />
        </el-header>
        <el-container class="container-body">
            <!-- 侧边栏 -->
            <el-aside class="aside" :style="{ width: collapse ? '64px' : '200px' }">
                <lemon-aside />
            </el-aside>
            <!-- 主体内容 -->
            <el-main class="main">
                <!-- 面包屑 -->
                <lemon-bread />
                <div :class="mainClass">
                    <router-view />
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang="ts">
import { ref, inject, watch } from "vue";
import { useRoute } from "vue-router";
import LemonHeader from "@/components/LemonHeader.vue";
import LemonAside from "@/components/LemonAside.vue";
import LemonBread from "@/components/LemonBread.vue";

//获取自定义全局方法
const { authStore, emitter } = inject<any>("method");

//是否展开
const collapse = ref<boolean>(authStore.menuCollapse);
emitter.on("on-menu-collapse", (val: boolean) => (collapse.value = val));

const mainClass = ref("");

//路由
const route = useRoute();

//监听路由变化
watch(
    () => route.fullPath,
    (_newPath, _oldPath) => {
        mainClass.value = "animate__animated animate__fadeIn";
        setTimeout(() => (mainClass.value = ""), 500);
    }
);
</script>

<style scoped lang="less">
@height: calc(100vh - 60px);

.container {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;

    .header {
        padding: 0;
    }

    .container-body {
        height: @height;
        max-height: @height;

        .aside {
            //width: calc(var(--el-menu-icon-width) + var(--el-menu-base-level-padding) * 2);
            height: @height;
            max-height: @height;
            overflow-y: auto;
        }

        .main {
            padding: 0px;
            height: @height;
            max-height: @height;
        }
    }
}
</style>
